<template>
  <div id="home">
    <div class="banner">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in 2" :key="item">
          <a href="" v-if="item == 1"
            ><img src="@/assets/images/banner1.jpg" alt=""
          /></a>
          <a href="" v-if="item == 2"
            ><img src="@/assets/images/banner2.jpg" alt=""
          /></a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="aboutUs">
      <div class="abs_body">
        <div class="left">
          <h1>一</h1>
          <h2>ABOUT US</h2>
          <p>
            True North Computation, also known as TNC, is making its mark as a
            prominent player in the dynamic International Data Corporation (IDC)
            industry. Originating from Manitoba, Canada—a region abundant in
            electricity and power—TNC has transitioned from traditional
            industries like gold mining and timber to become a leader in today's
            technological infrastructure.
          </p>
        </div>
        <div class="right">
          <img src="@/assets/images/sy1.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="WhoWeAre">
      <div class="wwa_body">
        <div class="text">
          <h1>一</h1>
          <h2>WHO WE ARE</h2>
          <p>
            Welcome to the TNC page, a testament to where innovation seamlessly
            merges with excellence.
          </p>
        </div>
      </div>
    </div>
    <div class="product">
      <div class="product_body">
        <div class="left">
          <h1>一</h1>
          <h2>THE PRODUCT</h2>
          <p>
            The IDC sector is pivotal for businesses aiming to navigate the
            digital-first world, ensuring the robust management and processing
            of immense data volumes necessary for operational excellence and
            innovation. As per recent industry forecasts, there is a significant
            move towards adopting multicloud and hybrid digital infrastructure
            to enhance operational resiliency and security, which directly
            aligns with the growing demands for data sovereignty and localized
            compliance, especially in handling sensitive workloads.
          </p>
        </div>
        <div class="right">
          <img src="@/assets/images/sy3.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="tf"><img src="@/assets/images/tf.jpg" alt="" /></div>
    <div class="text">
      <p>
        True North Computation, also known as TNC, is making its mark as a
        prominent player in the dynamic International Data Corporation (IDC)
        industry. Originating from Manitoba, Canada—a region abundant in
        electricity and power—TNC has transitioned from traditional industries
        like gold mining and timber to become a leader in today's technological
        infrastructure.
      </p>
    </div>
    <div class="img_group">
      <div class="img_body">
        <img src="@/assets/images/sy_01.jpg" alt="" />
        <img src="@/assets/images/sy_03.jpg" alt="" />
        <img src="@/assets/images/sy_05.jpg" alt="" />
      </div>
    </div>
    <div class="text">
      <p>
        As a wholly Canadian-owned company, TNC embodies the robust spirit and
        values of its industrial predecessors while innovating to meet the
        modern demands for advanced technology infrastructure. With its
        headquarters centrally located in Canada, TNC operates four IDC
        facilities across Manitoba, Alberta, Ontario, and Quebec. This strategic
        positioning allows TNC to cater not only to the vast North American
        market but also to provide cutting-edge data center solutions globally.
        The IDC (International Data Corporation) industry, crucial to the
        operations of companies like True North Computation, is rapidly evolving
        and playing a pivotal role in today's technology-driven economy.
      </p>
    </div>
    <div class="img_group">
      <div class="img_body">
        <img src="@/assets/images/sy2_01.jpg" alt="" />
        <img src="@/assets/images/sy2_03.jpg" alt="" />
        <img src="@/assets/images/sy2_05.jpg" alt="" />
      </div>
    </div>
    <div class="text">
      <p>
        With numerous Fortune 500 companies such as Equinix, and American Tower
        Corporation leading the industry progress globally, this sector is
        experiencing transformative trends that emphasize the critical
        importance of digital infrastructure for today’s world. The IDC
        represents the foundational digital infrastructure that supports the
        digital activities of all modern businesses that utilizes data
        processing, storage, and analysis. These advancements are pivotal in
        redefining how companies operate, highlighting the essential function of
        data centers in today's digital ecosystem.
      </p>
    </div>
  </div>
</template>

<style>
.img_group{
  display: flex;
  justify-content: center;
}
.img_body{
  width: 1200px;
  display: flex;
  justify-content: space-between;
}
.img_body img{
  width: 380px;
}
.text {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}
.text p {
  font-size: 18px;
  width: 1200px;
}
.tf {
  margin-top: 100px;
}
#home {
  padding-top: 90px;
  overflow: hidden;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 750px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel__container {
  position: relative;
  height: 750px !important;
}
.aboutUs {
  display: flex;
  justify-content: center;
  height: 300px;
}
.abs_body {
  width: 1280px;
  display: flex;
  align-items: center;
}
.abs_body .left {
  margin-right: 20px;
  margin-left: 20px;
}
.abs_body .right {
  /* margin-right: 20px; */
  padding-top: 70px;
}
.abs_body h1 {
  color: #75acff;
  margin-bottom: 0px;
  font-size: 34px !important;
}
.abs_body h2 {
  color: #000;
  margin-top: 0;
  margin-bottom: 0px;
  font-size: 34px !important;
}
.abs_body p {
  margin-top: 10px;
  color: #5a5a5a;
  font-size: 18px;
}

.WhoWeAre {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  height: 350px;
}
.wwa_body {
  background-image: url("@/assets/images/sy2.jpg");
  height: 350px;
  width: 1240px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
}
.wwa_body .text {
  width: 350px;
}
.wwa_body h1 {
  color: #fff;
  margin-bottom: 0px;
  font-size: 34px !important;
}
.wwa_body h2 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0px;
  font-size: 34px !important;
}
.wwa_body p {
  margin-top: 10px;
  color: #fff;
  font-size: 18px;
}

.product {
  display: flex;
  justify-content: center;
  height: 300px;
  margin-top: 40px;
}
.product_body {
  width: 1280px;
  display: flex;
  align-items: center;
}
.product_body .left {
  margin-right: 20px;
  margin-left: 20px;
}
.product_body .right {
  /* margin-right: 20px; */
  padding-top: 70px;
}
.product_body h1 {
  color: #75acff;
  margin-bottom: 0px;
  font-size: 34px !important;
}
.product_body h2 {
  color: #000;
  margin-top: 0;
  margin-bottom: 0px;
  font-size: 34px !important;
}
.product_body p {
  margin-top: 10px;
  color: #5a5a5a;
  font-size: 18px;
}
</style>